
<%@ page import="com.afb.HHPredJob" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'HHPredJob.label', default: 'HHPredJob')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>


<style type="text/css">

* {margin:0; padding:0}
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}



</style>

<script type="text/javascript">

var tooltip=function(){
	var id = 'tt';
	var top = 3;
	var left = 3;
	var maxw = 300;
	var speed = 10;
	var timer = 20;
	var endalpha = 95;
	var alpha = 0;
	var tt,t,c,b,h;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
			if(tt == null){
				tt = document.createElement('div');
				tt.setAttribute('id',id);
				t = document.createElement('div');
				t.setAttribute('id',id + 'top');
				c = document.createElement('div');
				c.setAttribute('id',id + 'cont');
				b = document.createElement('div');
				b.setAttribute('id',id + 'bot');
				tt.appendChild(t);
				tt.appendChild(c);
				tt.appendChild(b);
				document.body.appendChild(tt);
				tt.style.opacity = 0;
				tt.style.filter = 'alpha(opacity=0)';
				document.onmousemove = this.pos;
			}
			tt.style.display = 'block';
			c.innerHTML = v;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top;
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(1)},timer);
		},
		pos:function(e){
			var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
			var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		fade:function(d){
			var a = alpha;
			if((a != endalpha && d == 1) || (a != 0 && d == -1)){
				var i = speed;
				if(endalpha - a < speed && d == 1){
					i = endalpha - a;
				}else if(alpha < speed && d == -1){
					i = a;
				}
				alpha = a + (i * d);
				tt.style.opacity = alpha * .01;
				tt.style.filter = 'alpha(opacity=' + alpha + ')';
			}else{
				clearInterval(tt.timer);
				if(d == -1){tt.style.display = 'none'}
			}
		},
		hide:function(){
			clearInterval(tt.timer);
			tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
		}
	};
}();

</script>




<STYLE type="text/css">
<!--
#loading {
	width: 200px;
	height: 100px;
	background-color: #c0c0c0;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -50px;
	margin-left: -100px;
	text-align: center;
}
-->
</STYLE>



    </head>
    <body>







<SCRIPT style="text/javascript">
document.write('<DIV id="loading"><BR><BR>Please wait...</DIV>');
window.onload=function(){
	document.getElementById("loading").style.display="none";
}
</SCRIPT>









        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
            <span class="menuButton"><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></span>
        </div>
        <div class="body">
            <h1>Match List</h1> 
<!--
            <h1>Match List <g:message code="default.list.label" args="[entityName]" /></h1>
-->

<br/>

            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>

            <b><g:message code="default.search.label" />  <b/><span class="hotspot" onmouseover="tooltip.show('<strong>Insert query terms</strong><br />Insert query terms comma separated. <BR/> For Example: \'Tubulin,FtsZ\'');" onmouseout="tooltip.hide();">?</span>

            <g:form action="search" method="post" id="${jobId}">
                <g:textField name="search" value="${params.search}" size="150"/>
                <input type="submit" value="Search" />
            </g:form>


<br/>
<b>Job : <b/>${jobName}   
  <br/>
  <br/>
  <b> Query : <b/>${keywords}


<br/>

  <br/>
  <br/>
            <div class="list">
                <table>
                    <thead>
                        <tr>
                            <g:sortableColumn property="protein" title="${message(code: 'protein', default: 'Protein')}" />

                            <g:sortableColumn property="proteinSequences" title="${message(code: 'HHPredJob.proteinSequences.label', default: 'Family')}" />

                            <g:sortableColumn property="E-value" title="E-value" />

                            <g:sortableColumn property="Score" title="Score" />

                            <g:sortableColumn property="Probability" title="Probability" />

                            <g:sortableColumn property="Aligned columns" title="Aligned columns" />
                            
                            <g:sortableColumn property="identities" title="Identities" />

                            <g:sortableColumn property="similarity" title="Similarity" />

                            <g:sortableColumn property="sumProbs" title="Sum Probs" />



                        </tr>
                    </thead>
                    <tbody>
                    <g:each in="${matchInstanceList}" status="i" var="matchInstance">
                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
<!--
                            <td><g:link action="show" id="${matchInstance.proc.name}">${fieldValue(bean: matchInstance, field: "proc.name")}</g:link></td>
-->
                            <td><g:link action="process" id="${matchInstance.proc.id}" title="${fieldValue(bean: matchInstance, field: 'proc.description')}">${fieldValue(bean: matchInstance, field: "proc.name")}</g:link></td>

                            <td>${fieldValue(bean: matchInstance, field: "hit")}</td>
                            <!--
                            <td>${fieldValue(bean: matchInstance, field: "hit")}</td>
                            -->
                            <td>${fieldValue(bean: matchInstance, field: "eValue")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "score")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "prob")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "ssCols")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "identities")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "similarity")}</td>

                            <td>${fieldValue(bean: matchInstance, field: "sumProbs")}</td>

                        </tr>
                    </g:each>
                    </tbody>
                </table>
            </div>
<!--
            <div class="paginateButtons">
                <g:paginate total="${matchInstanceTotal}" />
            </div>
-->

            <div id="espacso">

            </div>

        </div>


    </body>
</html>
